import React, { PureComponent } from 'react'
import PropTypes from "prop-types";
import {
    Form,
    Input,
    Tree
} from "antd";
import menuList from "../../config/menuconfig"
const Item = Form.Item




export default class AuthForm extends PureComponent {

    constructor(props) {
        super(props)
        this.treeData = [
            {
                title: '平台权限',
                key: 'all',
                children:
                    this.getTreeData(menuList)     
            }
        ];
        const checkedKeys = this.props.role.menus;
        this.state = {
            checkedKeys
        }
    }

    static propTypes = {
        role: PropTypes.object.isRequired, // role角色
    }

    // 为父组件提交获取最新menus
    getMenus = () => this.state.checkedKeys
    

    getTreeData = (menuList) =>{
        return menuList.reduce((pre, item) => {
            pre.push(
                {
                    title:item.title,
                    key: item.key,
                    children:item.children? this.getTreeData(item.children) : [],
                }
            )  
            return pre
        }, [])
    }

    // 选中某个key时的回调
    onCheck = (checkedKeys)=> {
        this.setState({checkedKeys})
    }
    
    render() {
        console.log("AuthForm render");
        const {checkedKeys} = this.state
        const {role} = this.props

        const formItemLayout = {
            labelCol: {span: 4},
            wrapperCol: {span: 15},
        }

        return (
            <div>
                <Item label="角色名称:" {...formItemLayout}>
                    <Input value={role.name} disabled={true}/>
                </Item>
                <Tree
                    checkable
                    treeData={this.treeData}
                    defaultExpandAll={true}
                    checkedKeys={checkedKeys}
                    onCheck={this.onCheck}
                >
                </Tree>
            </div>
        )
    }
}
